<!--
 * @FileDescription 车道线识别
 * @Author 杨宇翔
 * @Date 20220816 13:54:54
 * @LastEditors 杨宇翔
 * @LastEditTime 20220816 13:54:54
-->
<template>
    <div class="container">
        <div class="video-container">
        <!-- 头部 -->
            <div class="header">
                <span>{{ options.get(UsageComponent.Default.VideoMode.value) ?? '' }}</span>
                <div v-if="ModalComponent.Default.isConnect.value == '请检查设备连接状况！'">
                    <input class="reset" type="text" placeholder="请选择文件" :value="UsageComponent.Default.Video.value"
                        @click="OnOpenDialogAsync">
                    <button @click="UsageComponent.Default.OpenVideoAsync">
                        <span>加载视频</span>
                    </button> 
                </div>
                <div v-else>
                    <button @click="SubmitAsync" class="submitbtn">
                        <span>提交</span>
                    </button>
                    <button @click="OpenDeviceAsync" class="camerbtn">
                        <span>使用相机数据</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- 播放、暂停、倍速、进度条控制 -->
        <div class="video-controls" v-if="ModalComponent.Default.isConnect.value == '请检查设备连接状况！'">
            <input class="playState" type="checkbox" id="车道线识别 - 播放状态"
                v-model="UsageComponent.Default.VideoPlaying.value" hidden>
            <label for="车道线识别 - 播放状态"></label>

            <div class="slider-group">
                <input type="range" name="车道线识别" id="车道线识别 - 模糊程度" min="0"
                    :max="UsageComponent.Default.VideoTotalMillisecond.value" step="0.001"
                    v-model.number="UsageComponent.Default.VideoMillisecondPosition.value"
                    @mousedown="UsageComponent.Default.OnPrepareSeek"
                    @mouseup="UsageComponent.Default.OnSeek">
            </div>

            <MediaSpeedControl :Options="speedOptions" v-model="UsageComponent.Default.VideoSpeed.value" />
        </div>
        <!-- 底部选择1 -->
        <div class="options-container">
            <div v-for="[id, option] of options" :key="option" class="aaa" @click="selectFn(id)" :class="UsageComponent.Default.VideoMode.value ==id ? 'checked' : '' ">
            {{ option }}
                <!-- <input type="radio" name="相机功能 - 模块" :id="option" :value="id"
                    v-model.number="UsageComponent.Default.VideoMode.value" hidden>
                <label :for="option">
                    <span>{{ option }}</span>
                </label> -->
            </div>
        </div>
        <!-- 底部选择2 -->
        <div class="indices-container">
            <template v-for="index of options.size" :key="index">
                <span>{{ index }}</span>
            </template>
        </div>
        <!-- 底部选择3 -->
        <div class="lines-container">
            <template v-for="index of (options.size - 1)" :key="index">
                <span></span>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { computed, ComputedRef, ref, Ref, watch } from 'vue';
import { UsageComponent } from './BinocularCameraComponent';
import MediaSpeedControl from './MediaSpeedControl.vue';
import ModalComponent, { ModalOptions } from '@runtime/module/Modal/ModalComponent';
import ExamComponent from './ExamComponent';
import BinocularCameraComponent from './BinocularCameraComponent';
import TimerComponent from '@runtime/module/Timer/TimerComponent';

const options = new Map<number, string>([
    [0, '原始视频'],
    [1, '灰度化处理'],
    [2, '高斯模糊降噪处理'],
    [3, '边缘检测处理'],
    [4, '车道线所在区域'],
    [5, '车道线融合处理'],
]);

const speedOptions = new Map<number, string>([
    [2, '2.0x'],
    [1.5, '1.5x'],
    [1, '1.0x'],
    [0.5, '0.5x'],
]);

const videoProgressWidth: ComputedRef<string> = computed(() => `${UsageComponent.Default.VideoMillisecondPosition.value * 100 / UsageComponent.Default.VideoTotalMillisecond.value}%`);

const choice: Ref<number> = ref(0);
const isVideoData = ref<-1 | 0 | 1>(0);
async function OpenDeviceAsync(): Promise<void> {
    console.log('import.meta.env.DEV',import.meta.env.DEV);
    console.log('UsageComponent.Default.Video.value',UsageComponent.Default.Video.value);
    console.log('UsageComponent.Default.Video.value.length',UsageComponent.Default.Video.value.length);
    
    if (import.meta.env.DEV) {
        return;
    }

    if (UsageComponent.Default.Video.value.length == 0) {
        return;
    }
    await UsageComponent.Default.LoadDeviceAsync();
    
    choice.value = 0;
    isVideoData.value = -1;
}
const Percent = ref<number>(0);
async function SubmitAsync(): Promise<void> {
    // 点击提交，跳转到最后一个
    UsageComponent.Default.VideoMode.value = 5
    console.log('isVideoData.value',isVideoData.value);
    
    if (isVideoData.value == 0) {
        const returnOptions = ModalOptions.Default()
            .WithPrefix('/src/components/Apps/BinocularCamera/')
            .WithType('MessageBox')
            .WithContent('请先选择视频数据或者相机数据!')
            .WithButtons(['确定']);
        await ModalComponent.Default.PopupAsync(returnOptions)
        
        return;
    }
    const confirmOptions = ModalOptions.Default()
        .WithPrefix('/src/components/Apps/BinocularCamera/')
        .WithType('MessageBox')
        // .WithContent(isVideoData.value > 0 ? '是否提交视频数据?' : '是否提交相机数据?')
        .WithContent('是否提交数据?')
        .WithButtons(['确定', '取消']);
    if (await ModalComponent.Default.PopupAsync(confirmOptions) == '取消') {
        return;
    }
    

    BinocularCameraComponent.Default.IsLoading.value = true;

    // 比赛模式且当前不是相机硬件数据
    if (BinocularCameraComponent.Default.HasContext.value && isVideoData.value != -1) {
        await UsageComponent.Default.LoadDeviceAsync();

        choice.value = 5;
        isVideoData.value = -1;
    }

    BinocularCameraComponent.Default.LoadingPercent.value = 0; 
    ProcessPercentAsync();
    const response: ClientMessage.BinocularCameraLaneRatioAdaptingResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.BinocularCameraLaneRatioAdaptingRequest([], [], 1000 * 60));
    console.log(response);
    Percent.value = response.Percent;

    BinocularCameraComponent.Default.IsLoading.value = false;

    const options = ModalOptions.Default()
        .WithPrefix('/src/components/Apps/BinocularCamera/')
        .WithType('MessageBox')
        .WithContent(BinocularCameraComponent.Default.HasContext.value ? '已验证' : `当前得分: ${response.Percent}`)
        .WithButtons(['确定']);
    await ModalComponent.Default.PopupAsync(options);
}

async function ProcessPercentAsync(duration: number = 60): Promise<void> {
    const delta = 100 / duration;
    while (BinocularCameraComponent.Default.LoadingPercent.value > -1 && BinocularCameraComponent.Default.LoadingPercent.value < 100) {
        await TimerComponent.Default.WaitAsync(1000);
        BinocularCameraComponent.Default.LoadingPercent.value += delta;
    }
}

async function OnModeChangedAsync(): Promise<void> {
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.BinocularCameraLaneDetectionModeRequest(choice.value));
}

async function OnOpenDialogAsync(): Promise<void> {
    if (import.meta.env.DEV) {
        window.Logger.Debug('打开视频文件');
        return;
    }

    const response: ClientMessage.OpenFileDialogResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.OpenFileDialogRequest('请选择视频文件', '视频|*.mp4;*.mov;*.mkv;*.avi', '', true));

    if (response.FileName.length > 0) {
        UsageComponent.Default.Video.value = response.FileName;
    }
}


function selectFn(val:any) {
    UsageComponent.Default.VideoMode.value = val
}

</script>

<style scoped>
.video-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 66%;
    aspect-ratio: 16 / 9;

    border-radius: 1rem;
}

.header {
    position: absolute;
    left: 0;
    top: -5rem;

    width: 100%;

    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: 1rem;
}

.header>span {
    flex-grow: 1;

    color: white;
    font-size: 2.4rem;
}

.header>div>input {
    width: 50rem;
    height: 4rem;

    color: white;

    padding: 0 1rem;

    border-radius: 0.6rem;
    border: 1px solid #36384B;

    background-color: #0f0f1a;
    margin-right: 20px;
}

.header>div>button {
    width: 10rem;
    height: 4rem;

    color: white;
    font-size: 1.8rem;

    border: none;
    border-radius: 0.6rem;
    background-color: #A2A2FF80;
} 
.header>div>button:nth-child(1) {
    margin-right: 20px;
}
.submitbtn {
    width: 11rem;
    height: 4rem;

    color: white;
    font-size: 1.8rem;

    border: none;
    border-radius: 0.6rem;
    background-color: #A2A2FF80;
    margin-right: 20px;
}
.camerbtn {
    width: 17rem !important;
    height: 4rem;

    color: white;
    font-size: 1.8rem;

    border: none;
    border-radius: 0.6rem;
    background-color: #A2A2FF80;
}
.material-icons {
    font-size: 1.6rem;
}

.container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.options-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    bottom: 8rem;

    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.options-container>.aaa {
    display: block;
    width: 15rem;
    height: 4rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 1rem;
    background-color: #A2A2FF1F;
    color: #81859c;
    font-size: 16px;
}

.options-container>.aaa::after {
    content: '';

    position: absolute;
    bottom: 0;

    transform: translateY(100%);

    width: 0;
    height: 0;

    border: 1rem solid transparent;

    border-top-color: #A2A2FF1F;
}

.options-container>input:checked+label::after {
    border-top-color: #218CDE;
}

.options-container>label>span {
    color: #81859C;
    font-size: 1.6rem;
}

/* .options-container>input:checked+label { */
.checked {
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
    color: #ffffff !important;
}

.options-container>input:checked+label>span {
    color: white;
}

.indices-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    bottom: 4rem;

    display: flex;
    flex-direction: row;
    gap: 15rem;
}

.indices-container>span {
    display: inline-block;
    width: 2rem;
    height: 2rem;

    color: #81859C;
    font-size: 1rem;
    text-align: center;
    line-height: 2rem;

    border-radius: 2rem;
    background-color: #1B1B2B;
}

.lines-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    bottom: 5rem;

    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.lines-container>span {
    display: inline-block;
    width: 14rem;
    height: 0.1rem;

    background-color: #272739;
}

.video-controls {
    position: absolute;
    left: 50%;
    bottom: 18rem;

    transform: translateX(-50%);

    width: 128rem;
    height: 8rem;

    padding: 1.5rem 2rem;

    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: 2rem;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.video-controls>.playState+label {
    width: 5rem;
    height: 5rem;

    background-image: url('/static/BinocularCamera/ic_play.png');
}

.video-controls>.playState:hover+label {
    background-image: url('/static/BinocularCamera/ic_play 2.png');
}

.video-controls>.playState:checked+label {
    background-image: url('/static/BinocularCamera/ic_pause.png');
}

.video-controls>.playState:checked:hover+label {
    background-image: url('/static/BinocularCamera/ic_pause 2.png');
}

.slider-group {
    flex-grow: 1;

    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: 1rem;
}

.slider-group>input {
    width: 100%;
    height: 0.6rem;

    border-radius: 0.3rem;

    background: linear-gradient(90deg, #807DE1 0%, #218CDE 100%) #B1B1D41A;
    background-repeat: no-repeat;

    appearance: none;
}

.slider-group>input::-webkit-slider-thumb {
    appearance: none;

    position: relative;
    width: 2rem;
    height: 2rem;

    border-radius: 50%;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);

    cursor: pointer;
}

.slider-group>input {
    background-size: v-bind(videoProgressWidth);
}
</style>